<template>
  <div>
    <header-bg></header-bg>
    <!-- <div class="tip-info">2个包裹已发出</div> -->
    <div class="express-pannel" v-for="(express, expressIndex) in expressList" :key="expressIndex"  @click="toExpressDetail(express)">
      <div class="flex flex-between pad-l-12 pad-t-10 pad-b-10 pad-r-15">
        <span class="font-15" style="color:#FF7C00;">{{express.stateText || '待发货'}}</span>
        <span class="font-12 font-color-9" v-if="express.trackingNo">{{express.expressName}} {{express.trackingNo}}</span>
      </div>
      <div class="flex flex-between express-info" v-if="express.trackingNo">
        <img class="width-21 height-21" v-if="fileSpace" :src="fileSpace + '/images/express-car.png'" alt="">
        <div class="flex-item mar-l-20">
          <div class="line-1">{{express.Traces[0].AcceptStation}}</div>
          <div class="font-color-9 font-12 mar-t-10">{{express.Traces[0].AcceptTime}}</div>
        </div>
      </div>
      <div class="goods-show mar-t-15 mar-l-12 mar-r-12">
        <div class="goods-item" v-for="(goods, goodsIndex) in express.orderGoodsList" :key="goodsIndex">
          <img v-if="goods.goodsImageUrl" :src="goods.goodsImageUrl" alt="">
          <div class="goods-num">{{goods.goodsNum}}件</div>
        </div>
      </div>
      <div class="mar-t-8 mar-b-15 font-12 font-color-9 pad-l-12">共{{express.goodsNum}}件商品</div>
    </div>
  </div>
</template>
<script>
import HeaderBg from '@/components/headerBg'
import { getProjectOrder } from '@/api/distribution'
import { queryExpressByApartOrderId } from '@/api/common'
export default {
  components: { HeaderBg },
  data() {
    return {
      expressList: [],
      apartOrderIds: [], // 拆分订单id去重
      orderDetail: {}, // 订单详情
      orderGoodsList: [] // 订单商品数组
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.orderId = this.getCurrentPage().query.orderId
    this.getOrderDetail()
  },
  methods: {
    // 获取订单详情
    getOrderDetail() {
      this.expressList = []
      getProjectOrder(this.orderId).then(response => {
        if (response.isError) return
        this.orderDetail = response.data
        this.orderGoodsList = response.data.orderGoodsList
        // 整理拆单ID，一个apartOrderId一个物流
        const apartOrderSet = new Set()
        this.orderGoodsList.forEach(item => {
          apartOrderSet.add(item.apartOrderId)
        })
        this.apartOrderIds = [...apartOrderSet]
        // 订单拆为几单就调用几次物流详情接口
        this.apartOrderIds.forEach(item => {
          this.getExpressDetail(item)
        })
      }).catch(() => {
      })
    },
    // 获取物流详情
    getExpressDetail(apartOrderId) {
      queryExpressByApartOrderId(apartOrderId).then(response => {
        if (response.isError) return
        const express = response.data
        // 数据重组
        // 统计一单物流有几件商品
        let goodsNum = 0
        express.orderGoodsList = this.orderGoodsList.filter(item => {
          if (item.apartOrderId === apartOrderId) {
            goodsNum += item.goodsNum
          }
          return item.apartOrderId === apartOrderId
        })
        express.goodsNum = goodsNum
        this.expressList.push(express)
      }).catch(() => {
      })
    },
    // 去物流详情页
    toExpressDetail(item) {
      if (!item.trackingNo) return
      this.$pt.navigateTo({url: `/pages/personal/order/express-detail/main?orderId=${this.orderId}&apartOrderId=${item.orderGoodsList[0].apartOrderId}`})
    }
  }
}
</script>
<style lang="less" scoped>
.tip-info{
  font-size: 12px;
  color: white;
  height: 27px;
  line-height: 27px;
  padding: 0 10px;
  background-color: #631BE4;
}
.express-pannel{
  background-color: white;
  border-radius: 5px;
  margin: 10px 10px 0;
  line-height: 1;
  overflow: hidden;
  .line-1{
    line-height: 1;
    height: 15px;
  }
  .express-info{
    height: 60px;
    padding: 0 38px 0 20px;
    background-color: #FAFAFA;
  }
}
.goods-show{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  flex-flow: nowrap;
  .goods-item{
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 5px;
    margin-left: 10px;
    position: relative;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
    &:first-child{
      margin-left: unset;
    }
    .goods-num{
      position: absolute;
      left: 0;
      bottom: 0;
      line-height: 15px;
      font-size: 10px;
      text-align: center;
      width: 100%;
      background-color: rgba(255, 255, 255, .66);
    }
  }
}
</style>
